<template>
  <div class="app-container">
    <h4 class="form-header h4">基本信息</h4>
    <div class="dashboard-editor-container" v-loading="loading">
      <!-- 企业名称 - 修正为平级字段 -->
      <h3 class="comName">企业名称：{{ companies.companyName || '加载中...' }}</h3>

      <!-- 企业积分 - 修正为平级字段 -->
      <h4 class="comName">企业积分：{{ companies.cIntegral || '0' }}</h4>

      <!-- 营业执照图片 - 修复路径和异步加载问题 -->
      <div class="content">
        营业执照：
        <viewer :images="licenseImg" v-if="licenseImg.length">
          <img
            class="user-avatar"
            v-for="(src, index) in licenseImg"
            :src="src"
            :key="index"
            alt="营业执照图片"
          >
        </viewer>
        <span v-else>未上传营业执照</span>
        <br>
        有效期：{{ companies.cLicTime || '未设置' }}
      </div>

      <!-- 法人信息 - 修正字段路径 -->
      <div class="content">
        <h4>法人姓名：{{ companies.cLegalName || '未填写' }}</h4>
        <h4>法人证件号：{{ formatIdCard(companies.cLegalId) }}</h4>
        证件有效期：{{ companies.cLegalTime || '未设置' }}
      </div>

      <!-- 注册地址信息 - 新增补充 -->
      <div class="content">
        <h4>注册地址：{{ companies.province || '' }} {{ companies.city || '' }} {{ companies.cAddress || '' }}</h4>
        <h4>企业类型：{{ getDictLabel(statusOptions, companies.cType) }}</h4>
        <h4>经营状态：{{ getDictLabel(companyOptions, companies.cStatus) }}</h4>
        <h4>经营范围：{{ companies.cBusSco || '未填写' }}</h4>
      </div>
    </div>

    <el-form label-width="100px">
      <el-form-item style="text-align: center; margin-left: -120px; margin-top: 30px;">
        <el-button @click="close()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCompanies } from "@/api/system/details";
import { getDicts } from "@/api/system/dict/data"; // 假设引入了字典工具函数

export default {
  name: "companyDetails",
  data() {
    return {
      licenseImg: [], // 营业执照图片路径数组
      publicPath: '/dev-api', // API基础路径
      loading: true, // 加载状态
      companies: {}, // 企业详情数据
      statusOptions: [], // 企业类型字典
      companyOptions: [] // 企业状态字典
    };
  },
  created() {
    // 1. 获取路由参数中的企业ID
    const cId = this.$route.params?.cId;
    if (cId) {
      // 2. 并行加载企业详情和字典数据
      Promise.all([
        getCompanies(cId),
        getDicts("company_type"),
        getDicts("company_com_status")
      ]).then(([companyRes, typeRes, statusRes]) => {
        // 3. 赋值企业详情数据
        this.companies = companyRes.data || {};

        // 4. 处理营业执照图片路径
        if (this.companies.cLicense) {
          this.licenseImg = [this.publicPath + this.companies.cLicense];
        }

        // 5. 赋值字典数据
        this.statusOptions = typeRes.data || [];
        this.companyOptions = statusRes.data || [];

        // 6. 关闭加载状态
        this.loading = false;
      }).catch(error => {
        console.error("加载数据失败：", error);
        this.loading = false;
        this.$message.error("获取企业详情失败，请重试");
      });
    } else {
      this.loading = false;
      this.$message.error("未找到企业ID");
    }
  },
  methods: {
    /** 关闭按钮 - 返回上一页 */
    close() {
      this.$router.back();
    },

    /** 格式化身份证号 - 中间隐藏 */
    formatIdCard(id) {
      if (!id) return '未填写';
      return id.replace(/(\d{6})(\d{8})(\d{4})/, '$1********$3');
    },

    /** 获取字典标签（根据字典值匹配标签） */
    getDictLabel(options, value) {
      if (!options || !value) return '未知';
      const item = options.find(option => option.dictValue === value);
      return item ? item.dictLabel : '未知';
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
  text-align: center;
  min-height: 400px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }

  .user-avatar {
    cursor: pointer;
    width: 240px;
    height: 240px;
    border-radius: 5px;
    margin: 10px auto;
    display: inline-block;
    border: 1px solid #eee;
  }

  .content {
    margin: 20px 0;
    padding: 15px;
    background: #fff;
    border-radius: 4px;
    text-align: left;
    line-height: 1.8;

    h4 {
      margin: 10px 0;
      color: #333;
    }
  }
}

.comName {
  margin: 15px auto;
  color: #1f2d3d;
}

.form-header {
  color: #4e5969;
  border-bottom: 1px solid #e5e6eb;
  padding-bottom: 10px;
  margin-bottom: 20px;
  text-align: left;
}
</style>
